<script setup>
import { useWMSStore } from '@/stores'

const wmsStore = useWMSStore()
const wmsInfo = reactive({
  Provider: '',
  WMSType: '',
  Title: '',
  BoundingBox: ''
})
watch(
  () => wmsStore.currentLayer,
  (newLayer) => {
    wmsInfo.Provider = wmsStore.wmsInfo.provider
    wmsInfo.WMSType = wmsStore.wmsInfo.wmsType
    wmsInfo.Title = newLayer.title
    wmsInfo.BoundingBox = newLayer.boundingBox
  }
)
</script>

<template>
  <n-card class="flex-1 h-195px" size="small">
    <n-descriptions label-placement="left" :column="2" title="WMS基本信息">
      <n-descriptions-item label="提供商" :span="2">{{ wmsInfo.Provider }}</n-descriptions-item>
      <n-descriptions-item label="WMS版本" :span="2">{{ wmsInfo.WMSType }}</n-descriptions-item>
      <n-descriptions-item label="图层名" :span="2">{{ wmsInfo.Title }}</n-descriptions-item>
      <n-descriptions-item label="范围" :span="2">{{ wmsInfo.BoundingBox }}</n-descriptions-item>
    </n-descriptions>
  </n-card>
</template>
